<template>
  <van-index-bar :index-list="data.indexList">
    <template v-for="item in cities">
      <!-- index 是和右侧索引进行关联 -->
      <van-index-anchor :index="item.letter" />
      <van-cell
        :title="item1.name"
        v-for="item1 in item.data"
        @click="changeCity(item1.name)"
      />
    </template>
  </van-index-bar>
</template>

<script setup lang="ts">
/**
 * reactive与ref区别
1、 从定义数据方面：

ref通常用来定义基本类型数据
reactive用来定义：对象（或者数组）类型数据
ref也可以用来定义对象或者数组类型的数据，内部会通过reactive转为代理对象
2、从原理方面：
ref通过Object.defineProperty()的get和set实现数据代理。
reactive使用Proxy实现数据代理，并且通过Reflect操作源对象内部的数据。
3、从使用方面：
ref操作数据需要.value，template模板中不需要。
reactive都不需要,value

 */
import { onUnmounted, reactive } from "vue";
import { useRouter } from 'vue-router'
import { useBottomStore } from "@/stores/buttom";
// 导入城市列表数据
import cities from '@/config/city2'
const store = useBottomStore();
const router = useRouter()

store.changeBottomStatus();
onUnmounted(() => {
  store.changeBottomStatus();
});
const data: any = reactive({
  indexList: [],
});

data.indexList = cities.map((item: any) => item.letter)
// 修改切换城市
function changeCity(city: string) {
  localStorage.setItem('city', city)
  //设置时间戳  exprire到期 => exp
  localStorage.setItem('city_exp',String(new Date().getTime()))
  router.push('/')
}
</script>

<style scoped></style>
